import React from 'react'
import Detail from '../Detail'
import { Route, Routes, Link, useNavigate } from 'react-router-dom'

export default function Message() {
    const navigate = useNavigate()

    function pushItem ( id, title, content ) {
        navigate('detail', { state : { id, title, content } });
    }

    function replaceItem ( id, title, content ) {
        navigate('detail', { state : { id, title, content }, replace: true });
    }

    const MessageData = [
        { id: 1, title: "1233", content: "我真帅" },
        { id: 2, title: "4566", content: "中国真好" },
        { id: 3, title: "7899", content: "我还是很帅" },
    ];

    return (
        <div>
            <ul>
                {MessageData.map((item, index) => {
                    return (
                        <li key={item.id}>
                            <Link to={`detail`} state={{ ...item }} >message001</Link>&nbsp;&nbsp;
                            <button onClick={() => { pushItem( item.id, item.title, item.content ) }}>push</button>
                            <button onClick={ () => { replaceItem( item.id, item.title, item.content ) } }>replace</button>
                        </li>
                    );
                })}
            </ul>

            <Routes>
                <Route path="detail" element={<Detail />}></Route>
            </Routes>
        </div>
    );
}
